<template>
  <div id="login">
    <div class="login2">
      <!-- <div style="margin-left: 450px;margin-top: 30px">
          <p style="color:#9b9b9b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;QQ群：218851843</p>
          <img :src="imgUrl" width="200px">
          <p style="color:#9b9b9b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有疑问加群咨询</p>
        </div> -->
      <!-- <div style="margin-top: -130px"> -->
      <div class="login-container">
        <div class="login_style" style="margin-top:100px; padding: 10px;text-align: center;" v-if="!isRegister">
          <h2 style="margin-bottom: 10px;  ">用户登录</h2>
          <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-with="5px" width="500px">
            <el-form-item prop="user_name" label="">
              <el-input type="text" placeholder="用户名" :prefix-icon='User' v-model="loginForm.user_name" />
            </el-form-item>
            <el-form-item prop="password" label="">
              <el-input type="password" placeholder="密码" :prefix-icon='Lock' v-model="loginForm.password" />
            </el-form-item>
            <div class="btn-box">
              <el-button type="primary" style="width:100%" @click="loginBtn">登录</el-button>
            </div>
          </el-form>
          <div class="min_box">
            <div class="link-button" @click="register">新用户注册</div>
            <!-- <div  class="link-button" >找回密码</div> -->
            <!-- <el-link type="primary" :underline="false" @click="isShow = true">新用户注册</el-link> -->
            <!-- <el-link type="primary" style="margin-left: 120px" :underline="false" @click="EmailLogin()">邮箱验证码登录</el-link> -->
          </div>
        </div>
        <div class="login_style" style="padding: 0px 0;margin: 50px 0;text-align: center;" v-if="isRegister">
          <!-- 标题盒子 -->
          <div>
            <h2>用户注册</h2>
          </div>
          <!-- 输入框盒子 -->
          <el-form ref="registerFormRef" :model="registerForm" :rules="rules" label-with="5px">
            <el-form-item prop="real_name" label="">
              <el-input type="text" placeholder="请输入您的真实姓名" :prefix-icon='User' v-model="registerForm.real_name" />
            </el-form-item>
            <el-form-item prop="user_name" label="">
              <el-input type="text" placeholder="请输入您的账号" :prefix-icon='User' v-model="registerForm.user_name" />
            </el-form-item>
            <el-form-item prop="password" label="">
              <el-input type="password" placeholder="请输入您的密码" :prefix-icon='Lock' v-model="registerForm.password" />
            </el-form-item>
            <el-form-item prop="confirmPassword" label="">
              <el-input type="password" placeholder="请确认您的密码" :prefix-icon='Lock'
                v-model="registerForm.confirmPassword" />
            </el-form-item>
            <el-form-item prop="phone_num" label="">
              <el-input type="text" placeholder="请确认您的手机号" :prefix-icon='Iphone' v-model="registerForm.phone_num" />
            </el-form-item>
            <el-form-item prop="role">
              <el-select v-model="registerForm.role" placeholder="请选择您的身份">
                <el-option label="学生" value="学生" />
                <el-option label="老师" value="老师" />
              </el-select>
            </el-form-item>
            <!-- <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码"> -->
          </el-form>
          <!-- 按钮盒子 -->
          <div class="btn-box">
            <el-button type="primary" style="width:100%" @click="registerBtn">注册</el-button>
            <!-- 绑定点击事件 -->
            <!-- <p @click="mySwitch">已有账号?去登录</p> -->
          </div>
          <div class="min_box">
            <div class="link-button" @click="register">去登录</div>
            <!-- <div  class="link-button" >找回密码</div> -->
          </div>
        </div>
      </div>

      <!-- <el-link type="info" style="margin-top: 50px;margin-left: 90px" :underline="false" @click="OtherLogin()">其他方式登录>
        </el-link> -->
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { Lock, User, Iphone } from '@element-plus/icons-vue'
import { useLoginPort, useRegisterPort } from '@/api/login.js'
import { useRouter } from 'vue-router'

const preRef = ref('')
// const imgList = ref([require(''),require('')])
let flag = ref(true)
const mySwitch = () => {
  if (flag.value) {
    preRef.value.style.background = '#c9e0ed'
    preRef.value.style.transform = 'translateX(100%)'
  } else {
    preRef.value.style.background = '#eed4dc'
    preRef.value.style.transform = 'translateX(0%)'
  }
  clearForm()
  flag.value = !flag.value
}
const isRegister = ref(false)
const register = () => {
  //清除输入框的数据
  clearForm()
  isRegister.value = !isRegister.value
}

let isShow = ref(true)
const loginForm = reactive({
  user_name: 'admin',
  password: 'xike614',
})
const registerForm = reactive({
  real_name: '11',
  user_name: '222222',
  password: '222222',
  confirmPassword: '222222',
  phone_num: '11111111111',
  role: '学生'
})

//清除输入框的数据
const clearForm = () => {
  registerForm.real_name = ''
  registerForm.user_name = ''
  registerForm.password = ''
  registerForm.confirmPassword = ''
  registerForm.role = ''
  registerForm.phone_num = ''


  loginForm.user_name = ''
  loginForm.password = ''
}
const loginFormRef = ref('')
const registerFormRef = ref('')
const rules = reactive({
  real_name: [
    { required: true, message: '请输入您的账号', trigger: 'blur' },
    // {min:6,max:9,message:'长度应该在6~9个字符之间'}
  ],
  user_name: [
    { required: true, message: '请输入您的账号', trigger: 'blur' },
    // {min:6,max:9,message:'长度应该在6~9个字符之间'}
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 10, message: '长度应该在6~10个字符之间' },
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { min: 6, max: 10, message: '长度应该在6~10个字符之间' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  phone_num: [
    { required: true, message: '请输入正确的手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '请输入正确的手机号' }
  ]
})

//注册事件
const registerBtn = async () => {
  await registerFormRef.value.validate()
  if (registerForm.password !== registerForm.confirmPassword) {
    ElMessage({
      // showClose: false,
      message: '两次密码不一样,请重新输入！',
      type: 'error'
    })
    return
  }
  const res = await useRegisterPort(registerForm)
  // console.log(res,'loginres');
  // userStores.setToken(res.data.token)
  // userStores.setRole(res.data.role)
  // if(formModel.value.username === 'admin' && formModel.value.password === '123456')
  if (res.data.code === 200) {
    console.log(res.data, 'res');
    ElMessage({
      showClose: true,
      message: `${res.data.msg},请登录`,
      type: 'success'
    })
    //注册成功跳转到登录页
    register()
  } else {
    ElMessage({
      showClose: true,
      message: `${res.data.msg}`,
      type: 'error'
    })
    // 注册失败清空注册输入框数据
    clearForm()
  }
}

const router = useRouter()

import { useUserStore } from '@/stores/index'

const uesInfo = useUserStore()

const loginBtn = async () => {
  await loginFormRef.value.validate()

  const { data } = await useLoginPort(loginForm)
  if (data.code === 500) {
    console.log(data.msg,'000');
    ElMessage({
      message: '登录失败,' + data.msg,
      type: 'error'
    })
    return
  }
  uesInfo.userInfo.id = data.data.id
  uesInfo.userInfo.role = data.data.role
  uesInfo.userInfo.username = data.data.username
  // userStores.setToken(res.data.token)
  // userStores.setRole(res.data.role)
  // if(formModel.value.username === 'admin' && formModel.value.password === '123456')

  ElMessage({
    showClose: true,
    message: '登录成功',
    type: 'success'
  })
  console.log(data.data);
  router.push({
    name: 'Subject',
    // query: {
    //         userData: JSON.stringify(res.data) // 将返回的数据转换为字符串并传递给 'Subject' 页面
    //     }
    // params: { loginData: res.data.data } // 将 res 数据作为参数传递给 'Subject' 组件
  })

  // console.log('LOGIN2');
  //   mySwitch()
}




onMounted(() => {
  // console.log(uesInfo.userInfo,'uesrInfo111111');

})
</script>

<style scoped>
#login {
  position: fixed;
  width: 100%;
  height: 100%;
  /* background: #e6e6e6; */
  /* --body-bg-color:linear-gradient(to bottom, #81c3ee, #70bdf1, #5eb7f5, #4ab0f8, #34a9fb, #34a9fb, #34a9fb, #34a9fb, #4ab0f8, #5eb7f5, #70bdf1, #81c3ee); */
/* background: linear-gradient(to bottom, #81c3ee, #70bdf1, #5eb7f5, #4ab0f8, #34a9fb, #34a9fb, #34a9fb, #34a9fb, #4ab0f8, #5eb7f5, #70bdf1, #81c3ee); */
  display: flex;/* Permalink - use to edit and share this gradient. 永久链接 - 用于编辑和分享此渐变： https://colorzilla.com/gradient-editor/#b8e1fc+0,a9d2f3+10,90bcea+25,90bae4+25,90bcea+25,90bff0+51,6ba8e5+51,90bff0+51,a2daf5+79,bdf3fd+100 */
background: linear-gradient(to right,  rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,188,234,1) 25%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 25%,rgba(144,191,240,1) 51%,rgba(107,168,229,1) 51%,rgba(144,191,240,1) 51%,rgba(162,218,245,1) 79%,rgba(189,243,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  justify-content: center;
  /* 水平居中 */
  align-items: center;
  box-sizing: border-box;
}

.login2 {
  border-radius: 20px;
  /* margin-left: 50%;
    margin-top: 6%; */
  /* padding: 80px; */
  background: white;
  /* box-shadow: 4px 4px 4px #ccc; */
  width: 500px;
  height: 500px;
}

.login-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  /* height: 100vh; 设置容器高度占满整个视口 */
}

.login_style {
  border-radius: 20px;
  background: white;
  width: 350px;
  padding: 10px;
  /* 添加内边距，使内容与边框有一定的间距 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  box-sizing: border-box;
}

.login_style div h2{
  margin-bottom: 10px;
}
/* 
.login_style div{
  margin: 10px 0;
} */
/* 按钮盒子 */
.btn-box {
  display: flex;
  justify-content: center;
}

.min_box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px
}

.link-button {
  color: rgb(23, 131, 224);
  font-size: 12px;
  cursor: pointer;
  /* 添加鼠标指针样式，使其在鼠标悬停时显示手型 */
}

element.style {
  height: 0px;
  background-color: #e6e6e6;
}
</style>